<template>
	<z-paging ref="paging" v-model="dataList" @query="queryList" :refresherEnabled="true" :loadingMoreEnabled="true"
		:auto="false" :hideEmptyView="false">
		<view slot="top">
			<z-nav-bar backState="1000">收货地址</z-nav-bar>
		</view>
		
		<u-swipe-action >
			<u-swipe-action-item
				:options="options1"
				v-for="(item, index) in dataList"
				:key="index"
				@click="handleEdit($event, item)"
				:show="item.show">
				<view @click="handleSelectAddress(item)">
					<view class="u-p-30 bg-white u-flex">
						<view class="u-flex-11">
							<view>
								<text class="u-font-32 text-bold">{{item.province}}{{item.city}}{{item.area}}{{item.address}}</text>
							</view>
							<view style="opacity: 0.5;" class="u-m-t-10">
								<text>{{item.contacts}}</text>
								<text class="u-m-l-10">{{item.contactNumber}}</text>
							</view>
							<view class="u-m-t-10 u-flex">
								<view class="tag" v-if="item.addressLabel">
									<text>{{item.addressLabel}}</text>
								</view>
								<view class="u-m-l-30 tag " v-if="item.isDefault == '1'">
									<text>默认</text>
								</view>
							</view>
						</view>
						<view class="u-flex-1 u-flex u-flex-end">
							<u-icon name="arrow-right"></u-icon>
						</view>
					</view>
				</view>
			</u-swipe-action-item>
		</u-swipe-action>
		
		<!-- <view class="u-m-t-30">
			<view class="u-p-l-60 u-p-r-60 u-p-t-30 u-p-b-30 bg-white u-m-b-30 u-flex" v-for="(item, index) in dataList" :key="index">
				<view class="u-flex-11">
					<view>
						<text class="u-font-32 text-bold">{{item.province}}{{item.city}}{{item.area}}{{item.address}}</text>
					</view>
					<view style="opacity: 0.5;" class="u-m-t-10">
						<text>{{item.contacts}}</text>
						<text class="u-m-l-10">{{item.contactNumber}}</text>
					</view>
					<view class="u-m-t-10 u-flex">
						<view class="tag">
							<text>家</text>
						</view>
						<view class="u-m-l-30 tag " v-if="item.isDefault == '1'">
							<text>默认</text>
						</view>
					</view>
				</view>
				<view class="u-flex-1 u-flex u-flex-end">
					<u-icon name="arrow-right"></u-icon>
				</view>
			</view>
		</view> -->
		
		<view slot="bottom">
			<view class="u-p-30 bg-white">
				<view class="">
					<u-button text="添加新地址" shape="circle" :customStyle="{'backgroundColor':'#FFB143', 'color': '#FFFFFF'}" @click="handleAddAddress"></u-button>
				</view>
			</view>
		</view>	
	</z-paging>
</template>

<script>
	import {jumpTypeEnum} from '@/common/const.js'
	import {pageAddress, deleteAddress} from '@/api/address.js'
	
	export default{
		data(){
			return{
				dataList:[],
				requestParams:{},
				
				options1: [{
						icon: 'edit-pen-fill',
						style: {
							backgroundColor: '#FFB143',
							width: '40px',
							height: '40px',
							borderRadius: '100px',
							margin: '0 6px'
						}
				},{
						icon: 'trash-fill',
						style: {
							backgroundColor: '#f56c6c',
							width: '40px',
							height: '40px',
							borderRadius: '100px',
							margin: '0 6px'
						}
				}],
				
				route:null
			}
		},
		onLoad(e) {
			this.route = e.route
			this.init()
		},
		methods:{
			/**
			 * 初始化
			 */
			init(){
				this.reload()
				
				uni.$on('reloadShopUserAddress',()=>{
					this.reload()
				})
			},
			
			/**
			 * 重新加载
			 */
			reload(){
				setTimeout(()=>{
					// 重新加载
					this.$refs.paging.reload()
				},100)
			},
			
			queryList(pageNo, pageSize){
				this.requestParams.current = pageNo
				this.requestParams.size = pageSize
				pageAddress(this.requestParams).then(res=>{
					if(pageNo == 1){
						this.dataList = []
					}
					let data = res.data.records
					data.forEach(item=>{
						this.$set(item, 'show', true)
					})
					
					this.dataList = this.dataList.concat(data);
					this.$refs.paging.complete(res.data.records);
				}).catch(res => {
					//如果请求失败写this.$refs.paging.complete(false);
					//注意，每次都需要在catch中写这句话很麻烦，z-paging提供了方案可以全局统一处理
					//在底层的网络请求抛出异常时，写uni.$emit('z-paging-error-emit');即可
					this.$refs.paging.complete(false);
				})
			},
			
			
			/**
			 * 添加收货地址
			 */
			handleAddAddress(){
				this.jumpUtil.jumpTo(jumpTypeEnum.navigate, '/pages_one/address/edit', true)
			},
			
			/**
			 * 点击编辑和删除按钮
			 */
			handleEdit(e, item){
				if(e.index === 0){
					item.show = false
					// 编辑的场合
					this.jumpUtil.jumpTo(jumpTypeEnum.navigate, `/pages_one/address/edit?id=${item.id}`, true)
				} else {
					// 删除的场合
					this.deleteAddress(item)
				}
			},
			
			/**
			 * 删除
			 */
			deleteAddress(item){
				let that = this
				uni.showModal({
					title: '提示操作',
					content: '是否删除当前数据？',
					success: function (res) {
						if (res.confirm) {
							// 更新
							deleteAddress({
								id: item.id
							}).then(result=>{
								that.$u.toast("删除成功")
								that.reload()
							})
						} else if (res.cancel) {
								//console.log('用户点击取消');
						}
					}
				});
			},
			
			/**
			 * 选择地址
			 */
			handleSelectAddress(item){
				if(this.route == null)
					return
					
				let me = this;
				let pages = getCurrentPages();  //获取所有页面栈实例列表
				let nowPage = pages[ pages.length - 1];  //当前页页面实例
				let prevPage = pages[ pages.length - 2 ];  //上一页页面实例
				prevPage.$vm.defaultAddress = item;
				
				uni.navigateBack({  //uni.navigateTo跳转的返回，默认1为返回上一级
					delta: 1
				});
			},
		}
	}
</script>

<style scoped>
	.tag{
		padding: 5rpx 30rpx;
		background-color: #FFB143;
		border-radius: 12rpx;
	}
</style>